<template>
  <div data-page="app" @touchend="endFn" @touchstart="startFn" class="app" :style="`font-family: ${fontfamily};`">
    <!-- 一级路由出口 -->
    <router-view></router-view>

    <!-- audio标签-->
    <div>
     <audio
          ref="audio"
          controls
          autoplay
          preload
          loop
          @ended="audioEndFn"
          style="width: 0px; height: 0px; opacity: 0;"
          :src="`https://music.163.com/song/media/outer/url?id=${music_id}.mp3`"
     ></audio>
    </div>

    <!-- 设置页面皮肤/外观/字体 -->
    <div class="menu" v-if="isShow">
       <ul>
          <li 
            v-for="(item,i) in arr" 
            :key="item.id" 
            :class="[{active: i == num}]"
            @click="fontfamily = item.value; num=i; isShow=false">{{ item.text }}</li>
       </ul>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      music_id: "",
      duration: 0,
      currentTime: 0,
      fontfamily:'微软雅黑',
      arr: [
        {text: '正常' , value: '微软雅黑', id:1},
        {text: '绮梦' , value: 'qimeng', id:2},
        {text: '江令月' , value: 'jianglingyue', id:3},
        {text: '宋体' , value: '宋体', id:4},
        {text: '黑体' , value: '黑体', id:5},
        {text: '电影白' , value: 'dianyingbai', id:6}
      ],
      s_time: 0,
      e_time: 0,
      isShow: false,
      num: 0
    };
  },

  watch: {
    // 观察id是否有值
    id: {
      deep: true,
      handler(nid) {
        if (nid) {
          this.music_id = nid;
          // 获取dom元素
          if (this.$refs["audio"]) {
               // console.log("标签:", this.$refs["audio"]);
               // 获取音频总时长
               this.$refs["audio"].addEventListener('canplay',()=>{
                    // console.log(this.$refs["audio"].duration);
                    this.duration = this.$refs["audio"].duration;

                    // 共享音频总时长
                    // this.bridge.$emit('send-duration', this.duration);
               })
               // 获取当前播放的时长
               this.$refs["audio"].addEventListener('timeupdate',()=>{
                    // console.log(this.$refs["audio"].currentTime);
                    this.currentTime = this.$refs["audio"].currentTime;
                     // 共享音频当前播放时长
                     this.bridge.$emit('send-current-time', {
                         duration: this.duration,
                         currentTime:this.currentTime
                    });
               })
          }
        }
      },
    },
  },

  created() {
    // console.log('1.0',this.bridge);
    this.bridge.$on("send-id", (id) => {
      // console.log("id:", id);
      this.id = id;
    });


    // 获取token
    // let TOKEN = localStorage.getItem('_TOKEN')
    let STARTTIME = localStorage.getItem('_STARTTIME')
    let ENDTIME = new Date().getTime();
    let times = 2 * 60 * 60 * 1000;//有效时间2小时
    if((ENDTIME - STARTTIME) > times) {
      // 移除用户的临时身份
       localStorage.removeItem('_TOKEN')
       localStorage.removeItem('_STARTTIME')
       localStorage.removeItem('_USER')
    }

  },

  // 编写方法
  methods: {
    // 监听音乐播放是否结束
    audioEndFn(){
      console.log('当前播放结束')
    },

    startFn(){
       //开始时间戳
       this.s_time = new Date().getTime();
    },
    endFn(e){
       //开始时间戳
       this.e_time = new Date().getTime();
       // 时间 1秒 = 1000毫秒
       let times = 500;
      //  console.log(e);
       //  console.log("相减的时间戳：",this.e_time - this.s_time);
       // 超过500毫秒视为长按
       if((this.e_time - this.s_time) > times){
          // this.isShow = true;
       }
    },
  },

  // 钩子函数 获取dom元素
  mounted() {
    // 操作页面dom元素

    this.bridge.$on('touch-current-time', (option)=> {
        // console.log('xxxxxx:',option);
        // 控制音频的进度
        if(this.$refs['audio'])
        this.$refs['audio'].currentTime = option.currentTime;
    })


    this.bridge.$on('audio-control',(option)=> {
        // console.log('yyyy:',option.isPlay);
        if(!option.isPlay) {
          if(this.$refs['audio'])
          this.$refs['audio'].pause();//暂停
        }
        else {
          if(this.$refs['audio'])
          this.$refs['audio'].play();//播放
        }
    })


    this.bridge.$on('audio-id',(option)=>{
        // console.log('zzzz', option);
        this.id = option.id;
        this.music_id = option.id;
    })

    // 阻止出现鼠标菜单
    document.oncontextmenu = () => false;
  },
};
</script>

<style lang="less">
/* @import url(./static/css/base.css); */
@import "./static/less/variable.less";
.app {
  // font-family: qimeng;
  font-size: 16px;
}
.menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding: @pad;
  // transition: top .2s;
  ul {
    background-color: #fff;
    &:after {
      content: "";
      display: block;
      clear: both;
    }
    li {
      float: left;
      padding: 5px 10px;
      margin: 5px;
      border: 1px solid #ccc;
      font-size: 15px;
      font-family: Arial, Helvetica, sans-serif;
      border-radius: 4px;
    }
    .active {
       background-color: @bgColor;
       color: #fff;
    }
  }
}
</style>